<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
        <!--易烊千玺-->
		<nav class="mui-bar mui-bar-tab" id="nav">
		    <a class="mui-tab-item mui-active" id="a1">
		        <span class="mui-icon mui-icon-home"></span>
		        <span class="mui-tab-label">首页</span>
		    </a>
		    <a class="mui-tab-item" id="a2">
		        <span class="mui-icon mui-icon-phone"></span>
		        <span class="mui-tab-label">电话</span>
		    </a>
		    <a class="mui-tab-item" id="a3">
		        <span class="mui-icon mui-icon-email"></span>
		        <span class="mui-tab-label">邮件</span>
		    </a>
		    <a class="mui-tab-item" id="a4">
		        <span class="mui-icon mui-icon-gear"></span>
		        <span class="mui-tab-label">设置</span>
		    </a>
		</nav>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">  
            mui.init({  
                    subpages:[//先加载首页  
                        {  
                          url:'index.html',  
                          id:'a1',  
                          styles:{  
                             top:'0px',  
                              bottom:'60px'  
                          }  
                        }  
                          
                    ],  
                    preloadPages:[//缓存其他页面  
                        {  
                          url:'two.html',  
                          id:'a2',  
                          styles:{  
                             top:'0px',  
                            bottom:'60px'  
                          }  
                        },  
                        {  
                          url:'three.html',  
                          id:'a3',  
                          styles:{  
                             top:'0px',  
                            bottom:'60px'  
                          }
                        } ,
                        {  
                          url:'four.html',  
                          id:'a4',  
                          styles:{  
                             top:'0px',  
                            bottom:'60px'  
                          }
                         }
                    ]  
                      
                });  
            mui.plusReady(function(){   
                // 获取所有Webview窗口  
                var winAll=plus.webview.all();//获取所有窗体  
                //console.log(JSON.stringify(winAll))   
                var a1,a2,a3,a4 
                mui("#nav").on("tap","#a1",function(){//点击触发   
                    a1=plus.webview.getWebviewById("a1");  
                    console.log(JSON.stringify(a1))   
                    a1.show()  
                    a2.hide()//这一步必须有  
                    a3.hide()//这一步必须有  
                    a4.hide()
                })  
                mui("#nav").on("tap","#a2",function(){//点击触发  
                    a2=plus.webview.getWebviewById("a2");  
                    a2.show()  
                      
                })  
                mui("#nav").on("tap","#a3",function(){//点击触发  
                	console.log("sads")
                    a3=plus.webview.getWebviewById("a3");  
                    a3.show()
                      
                }) 
                mui("#nav").on("tap","#a4",function(){//点击触发  
                    a4=plus.webview.getWebviewById("a4");  
                    a4.show()  
                })
            });   
        </script>  
	</body>

</html>